<template>
  <div>
    <header-slot></header-slot>
    <el-card class="box-card">
      <div class="cut clearfix">
        <div
          :class="!classFlog ? 'opt cut_left' : 'cut_left'"
          @click="classFlog = false"
        >
          用户登录
        </div>
        <div
          :class="classFlog ? 'opt cut_right' : 'cut_right'"
          @click="classFlog = true"
        >
          管理员登录
        </div>
      </div>
      <el-form ref="form" :model="formData" label-width="60px" class="form">
        <el-form-item label="用户：" class="account">
          <el-input
            v-model="formData.account"
            placeholder="用户名"
            @blur="blurs(1)"
          ></el-input>
          <p v-if="accflog">账号不能为空！</p>
        </el-form-item>
        <el-form-item label="密码：" class="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            show-password
            @blur="blurs(2)"
          ></el-input>
          <p v-if="pasdflog">密码不能为空！</p>
        </el-form-item>
        <p v-if="flog">用户名或密码错误！</p>
        <div class="loginbox clearfix">
          <el-button class="login" @click="login">登录</el-button>
          <el-button class="register" @click="register">注册</el-button>
        </div>
      </el-form>
    </el-card>
    <footer-slot></footer-slot>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import headerSlot from "./header-slot";
import footerSlot from "./footer-slot";
export default {
  components: { headerSlot, footerSlot },
  data() {
    return {
      formData: {
        account: "",
        password: "",
      },
      flog: false,
      accflog: false,
      pasdflog: false,
      classFlog: false,
      imgs: "",
      UserIDs: "",
      shopnums: "",
    };
  },
  methods: {
    // 注册
    register() {
      this.$router.push("/register");
    },
    // 登录
    login() {
      if (!this.accflog && !this.pasdflog) {
        if (this.classFlog) {
          this.$axios
            .post("/user/loginByAdmin", {
              username: this.formData.account,
              password: this.formData.password,
            })
            .then((res) => {
              if (res.data.data != "账号或密码错误") {
                this.flog = false;
                sessionStorage.setItem("tokens", 1);
                alert("管理员登录成功！");
                this.$router.push({
                  path: "/backstage",
                });
              } else {
                this.flog = true;
              }
            });
        } else {
          this.$axios
            .post("/user/login", {
              username: this.formData.account,
              password: this.formData.password,
            })
            .then((res) => {
              if (res.data.data == "账号或密码错误") {
                this.flog = true;
              } else {
                this.flog = false;
                sessionStorage.setItem("userId", res.data.data);
                sessionStorage.setItem("token", 1);
                alert("用户登录成功！");
                if (this.$route.query.url != undefined) {
                  this.$router.push({
                  path: `${this.$route.query.url}`,
                });
                }
                this.$router.push({
                  path: "/",
                });
              }
            });
        }
      }
    },
    // 判空
    blurs(idx) {
      if (idx == 1) {
        this.formData.account == ""
          ? (this.accflog = true)
          : (this.accflog = false);
      } else {
        this.formData.password == ""
          ? (this.pasdflog = true)
          : (this.pasdflog = false);
      }
    },
  },
  mounted() {
    if (this.$route.params.flog) {
      location.reload();
    }
  },
};
</script>
<style scoped>
.cut > div {
  float: left;
  width: 50%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
}
.cut_left {
  border-right: 1px solid #ccc;
}
.cut > .opt {
  color: #f10215;
  border-bottom: 0;
}
.form {
  position: relative;
  margin-top: 20px;
}
.box-card {
  width: 400px;
  margin: 200px auto;
}
.account {
  position: relative;
}
.password {
  position: relative;
}
.box-card /deep/ .el-form-item p {
  position: absolute;
  top: 40px;
  height: 19px;
  line-height: 19px;
  color: #f10215;
}
.loginbox {
  width: 300px;
  height: 40px;
  margin: 40px auto;
}
.login {
  float: left;
  width: 140px;
}
.register{
  float: right;
  width: 140px;
}
.form > p {
  position: absolute;
  color: #f10215;
  text-align: center;
  bottom: 55px;
  left: 50%;
  transform: translateX(-64px);
}
</style>